<template>
	<nav-header type="noHeader" title="中山生命科学园" :needSearch="true" :needLocate="false" :titleScrollShow="titleScrollShow"
		:inputNavigateUrl="'/pages/search/index?type=home'" >
		<view class="m-4 shadow-lg">
		   <u-swiper indicator circular :list="slideshowList" height="150" radius="8" @click="handleSlideshowClick"></u-swiper>
		</view>

		<view class="bg-white px-4 pb-4 pt-6 mb-6 mx-4 rounded-lg shadow-lg">
			<u-scroll-list :indicator="false">
				<view class="inline-block mr-2">
					<view class="w-full grid grid-cols-3 gap-3_5" :style="{width: (system.pageWidth - 64) + 'px !important'}">
						<view v-for="(config,key) in funcGroup1" :key="key" class="text-center" @tap="()=>{
							if (config.navUrl) {
                if(config.navUrl == '/pages/employ/index'){
                  switchTab( config.navUrl)
                }else {
                  $util.myNavigateTo(config.navUrl)
                }

							}else {
								funcGroup1[key].fnc()
							}
						}">
							<image :src="config.pic" class="w-8 h-8"></image>
							<text class="block text-gray-66 text-sm pt-1" v-text="config.name"></text>
						</view>
					</view>
				</view>

			</u-scroll-list>
		</view>

		<view class="mx-4 mb-6">
			<u-tabs :list="[{name: '园区动态', code: 'park_dynamics_news'},{name: '活动资讯', code: 'policy_adv'},{name: '政策速递', code: 'policy_speed'}]"
				:activeStyle="{color: '#46e4fd',fontWeight: 'bold',transform: 'scale(1.05)'}"
				lineWidth="25" lineColor="#46e4fd" @change="isActivity"></u-tabs>
			<view v-if="articleList.length > 0" class="bg-white px-3 py-5 mt-2 rounded-lg">
        <!--		园区动态和政策速递		-->
        <view  v-for="(item,index) in articleList" :key="index" :class="{'pb-4 mb-4 border-b-ee': index != (articleList.length - 1)}"
					@click="handleSlideshowClickByDetail(item,index)">
					<view class="text-black-32 font-bold zx-multi-ellipsis--2" v-text="item.title"></view>
					<template v-if="item.image">
						<view class="text-gray-66 text-sm mt-3 flex justify-between">
							<view class="flex flex-col justify-between pr-2" style="width: calc(100% - 108px)">
								<view class="zx-multi-ellipsis--2" v-text="''"></view>
								<view class="text-gray-99" v-text="$util.getFormatDate(item.publishTime)"></view>
							</view>
							<image :src="$util.formatImageIdUrl(item.image)" class="rounded" style="width: 108px;height: 65px;" mode="aspectFill"></image>
						</view>
					</template>
          <template v-else-if="item.cover">
            <view class="text-gray-66 text-sm mt-3 flex justify-between">
              <view class="flex flex-col justify-between pr-2" style="width: calc(100% - 108px)">
                <view class="flex items-center mb-0_5">
                  <i class="iconfont icon-dingwei2 text-gray-99"></i>
                  <text class="pl-2 text-gray-99" v-text="item.address"></text>
                </view>
                <view class="flex items-center">
                  <i class="iconfont icon-shijian1 text-gray-99 text-sm" style="padding-left: 1px;"></i>
                  <text class="pl-2 text-gray-99" v-text="$util.getFormatDate(item.startTime) + ' ~ ' + $util.getFormatDate(item.endTime)"></text>
                </view>
              </view>
              <image :src="$util.formatImageIdUrl(item.cover)" class="rounded" style="width: 108px;height: 65px;" mode="aspectFill"></image>
            </view>

            <view class="text-gray-66 text-sm mt-3 flex justify-between">
              <view class="flex flex-col justify-between pr-2" style="width: calc(100% - 108px)">
                <view class="zx-multi-ellipsis--2" v-text="''"></view>
              </view>
            </view>

            <view v-if="item.joinEnabled == '0'" class="flex justify-between items-center">
              <view class="flex items-center">
                <u-avatar-group shape="square" :urls="item.headers" size="20" gap="-0.2" maxCount="3"></u-avatar-group>
                <i v-if="item.userTotal == 0 && item.onGoing" class="iconfont icon-huodong1 text-gray-99"></i>
                <text v-if="item.onGoing" class="text-gray-99 pl-1_5" v-text="item.userTotal == 0? '火热报名中':(item.userTotal + '人已报名')"></text>
              </view>
              <view class="rounded-full px-2_5 py-1_3 text-white" :class="item.isJoined || item.onGoing? ['blueGradient']:['bg-gray-300 text-gray-99']" @click.stop="()=>{
								if (item.onGoing && !item.isJoined) {
            $util.myNavigateTo('/pages_home/junchuang_form?businessType=activityApply&businessId='+item.id+'&businessName='+item.title)
								} else {
									$u.toast(!item.onGoing? '活动没开始或已结束，无法报名.':'活动已报名')
								}
							}"
                    v-text="item.isJoined? '已参加':'我要参与'"></view>
            </view>
          </template>
					<template v-else>
						<view class="text-gray-66 text-sm mt-2_5 zx-multi-ellipsis--2" v-text="''"></view>
						<view class="text-gray-99 text-sm mt-3" v-text="$util.getFormatDate(item.publishTime)"></view>
					</template>
				</view>


      </view>
			<view v-else class="w-full h-40 flex mt-4 items-center justify-center">
				<empty-data :index="2" :width="emptyWidth" :height="emptyWidth"></empty-data>
			</view>
		</view>
	</nav-header>
</template>

<script>
	import {mapState} from 'vuex'
	import NavHeader from '@/components/nav_header.vue'
	import EmptyData from '@/components/empty_data.vue'
	import * as articleApi from '@/interface/junchuang/article.js'
	import * as activityApi from "@/interface/junchuang/activity.js"

	export default {
		components: {
			NavHeader,EmptyData
		},
		data() {
			const v = this
			return {
				emptyWidth: 135,
				articleList: [],
				activityList: [],
				styleArticleList: [],
        bannerArticleList: [],
				titleScrollShow: false,
				curArticle: 'park_dynamics_news',
				slideshowList: [],
				funcGroup1: {
          changfang: {name: '找厂房', pic: '../../static/home/chanfang.png', navUrl: '/pages_employ/place_list'},
					qiye: {name: '找设备', pic: '../../static/home/shebei.png', navUrl: '/pages_home/lianmeng/product_index'},
					zhengce: {name: '找政策', pic: '../../static/home/zhengce.png', navUrl: '/pages/common/article_list?code=find_policy&dictCode=find_policy'},
          pingtai: {name: '找平台', pic: '../../static/home/pingta.png', navUrl: '/pages_home/lianmeng/project_index'},
          fengcai: {name: '找服务', pic: '../../static/home/fuwu.png', navUrl: '/pages/employ/index'},
          zhandian: {name: '会议室预约', pic: '../../static/home/zhandian.png', navUrl: '/pages_home/map_list?type=officeApply'},
				},
				funcGroup2: {

				},
			}
		},
		computed: {
			...mapState({
				user: state => state.user,
				system: state => state.system,
				formView: state => state.formView
			})
		},
    onShow() {
      this.$util.openShare();
    },
		onReady() {

			//获取就业的formcode
			const v = this
      v.initActivity()
			v.initStyleArticle()
			v.initBannerArticle()
      // 热点咨询
      if(v.curArticle === 'policy_adv'){ // 活动咨询
        v.initActivity()
      }else { // 热点咨询文章
        v.initArticle({code: v.curArticle})
      }

		},
		onPageScroll ({scrollTop}) {
			// 32为右上角胶囊按钮高度
			this.titleScrollShow = scrollTop > 0 && scrollTop > (this.system.menuBtnTop + 32)
		},
		onPullDownRefresh () {
      this.initActivity()
			this.initStyleArticle()
			this.initArticle({code: this.curArticle})
			uni.stopPullDownRefresh()
		},
		methods: {
			initActivity () {
				const v = this
				v.articleList = []
				let today,df = new v.$dateFormat()
				df.setTime(new Date())
				today = df.toString('yyyy-0m-0d 0h:0f')
				activityApi.getActivityPage({
					pageNum: 1,
					pageSize: 3,
					needContent: '0',
				}).then(res=>{
					if (res.success) {
						res.data.rows.forEach(item=>{
							let endTime = v.$util.getFormatDate(item.endTime, 'yyyy-0m-0d 0h:0f')
							let startTime = v.$util.getFormatDate(item.startTime, 'yyyy-0m-0d 0h:0f')
							item.onGoing = today >= startTime && today <= endTime
							item.headers = item.userList.filter((item,index) => index < 3).map(item=>{
								return v.$util.formatImageIdUrl(item.avatarUrl)
							})
						})
						v.articleList = res.data.rows
					}
				}).catch(e=>{
					console.log(e)
				})
			},
      // 首页滚动banner列表
      initBannerArticle () {
        const v = this;
        articleApi.getArticlePageList({
          code: 'home_banner'
        }).then(res=>{
          if (res.success) {
            v.bannerArticleList = res.data.rows
            // v.slideshowList = res.data.rows
            v.slideshowList = res.data.rows
            for(let i=0;i<v.bannerArticleList.length;i++){
              v.slideshowList[i].url = v.bannerArticleList[i].imagePath
              v.slideshowList[i].link = v.bannerArticleList[i].frameUrl
            }

          }
        }).catch(e=>{
          console.log(e)
        })
      },
			initStyleArticle () {
				const v = this;
				articleApi.getArticlePageList({
					pageNum: 1,
					pageSize: 5,
					code: 'military_style'
				}).then(res=>{
					if (res.success) {
						v.styleArticleList = res.data.rows
					}
				}).catch(e=>{
					console.log(e)
				})
			},
      // 判断是文章还是活动
      isActivity(item){
        const v = this;
        v.curArticle = item.code
        if(item.code === 'policy_adv'){ // 活动咨询
          v.initActivity()
        }else { // 热点咨询文章
          v.initArticle(item)
        }
      },
      // 热点咨询（不包含活动）
			initArticle(item) {
				const v = this;
				v.articleList = []
				v.curArticle = item.code
				articleApi.getArticlePageList({
					pageNum: 1,
					pageSize: 5,
					code: item.code,
					needContent: item.code == 'policy_adv'? '0':''
				}).then(res=>{
					if (res.success) {
						v.articleList = res.data.rows
					}
				}).catch(e=>{
					console.log(e)
				})
			},

      // 点击跳转详情页
      handleSlideshowClick(index){
        const v = this
        const article = v.slideshowList[index];

        if(article.type === '0'){ // 文章
          v.$util.myNavigateTo('/pages/common/article_detail?code=' + article.code + '&id=' + article.id)
        }

        if(article.type === '1'){ // 第三方链接
         // v.$util.setClipboard(article.link, true, ()=>{})
          v.$util.myNavigateTo('/pages/common/article_official_detail?code=' + article.code + '&id=' + article.id)
        }

        if(article.type === '2'){ // 小程序指定页面
          v.$util.myNavigateTo(article.link)
        }

      },
      // 跳转详情页
      handleSlideshowClickByDetail(item,index){
        const v = this
        console.log("v.curArticle",v.curArticle)
       if(v.curArticle === 'park_dynamics_news' || v.curArticle ===  'policy_speed' ){ // 第三方链接
          v.$util.myNavigateTo('/pages/common/article_official_detail?code=' + item.code + '&id=' + item.id)
        } else{ // 活动
          v.$util.myNavigateTo('/pages_home/junchuang_detail?id=' + item.id)
        }

      },

      // 跳转首页情况
      switchTab(url){
        uni.switchTab({
          url: url
        })

      },
		}
	}
</script>

<style>
	page{
		background-color: #f7f7f7;
	}

	.blueGradient {
		background: #4483d1;
		background: -webkit-linear-gradient(to right,#4483d1,#3c7cd3);
		background: linear-gradient(to right,#4483d1,#3c7cd3);
	}
  /*tab居中*/
  /deep/ .u-tabs__wrapper__nav__item{
    flex: 1 1 0% !important;
  }
</style>
